<template>
  <div class="page">
    <u-navbar title="分类列表">
      <div slot="right" @click="delLeve1Category" class="right">
        删除分类
      </div>
    </u-navbar>
    <div class="drop-list">
      <div class="drop-list-tab">
        <u-tabs :list="tabList" :show-bar="false" active-color="#333" :current="current" @change="changeTabs"></u-tabs>
      </div>
      <div class="drop-list-config" @click="addLeve1Category">
        <div>
          添加一级分类
        </div>
      </div>
    </div>
    <div class="content" v-if="categoryData.length !=0 && categoryData[current].children.length != 0">
      <u-swipe-action @click="changeSwipeCategory" :show="item.show" :options="options" :index="index" v-for="(item,index) in categoryData[current].children" :key="item.id">
        <div class="global-item flex">
          <div class="item-left">{{item.labelName}}</div>
          <div class="item-right">
            左滑修改/删除
          </div>
        </div>
      </u-swipe-action>
    </div>
    <div v-else>
      <u-empty mode="list"></u-empty>
    </div>

    <div class="submit fixed" @click="addCategory()">
      添加{{tabList[current].name|| ''}}分类

    </div>
    <!-- 删除确定框 -->
    <u-modal v-model="enableModal" :confirm-style="{color:'#333'}" content="是否删除？" @confirm="confirmModal" show-cancel-button></u-modal>
  </div>
</template>

<script>
import { getShopGoodsLabelList, delShopGoodsLabel } from "@/api/shops";
export default {
  data() {
    return {
      enableModal: false, //是否启动模态框
      categoryData: [], //分类列表
      current: 0,
      options: [
        {
          text: "编辑",
          style: {
            backgroundColor: "#999",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#333",
          },
        },
      ],
      tabList: [{ name: "" }],
      storeData: {},
    };
  },
  onShow() {
    this.init();
  },

  methods: {
    // 添加一级分类
    addLeve1Category() {
      uni.navigateTo({
        url: `/pages/other/setup/addCategory?add=true`,
      });
    },
    // 点击模态框
    async confirmModal() {
      let res = await delShopGoodsLabel(this.storeData.id);
      if (res.data.success) {
        uni.showToast({
          title: "删除成功!",
          duration: 2000,
          icon: "none",
        });

        setTimeout(() => {
          this.init();
        }, 500);
      }
    },
    // 删除一级分类
    delLeve1Category() {
      this.storeData = this.categoryData[this.current];
      this.enableModal = true;
    },
    // 编辑或删除 index == 0 ? '编辑' :'删除' 二级分类
    changeSwipeCategory(val, index) {
      if (index) {
        // 删除
        this.storeData = this.categoryData[this.current].children[val];
        this.enableModal = true;
      } else {
        uni.navigateTo({
          url: `/pages/other/setup/addCategory?data=${encodeURIComponent(
            JSON.stringify(this.categoryData[this.current].children[val])
          )}&update=true&id=${this.categoryData[this.current].id}`,
        });
      }
    },

    // 点击tab赋值index
    changeTabs(index) {
      this.current = index;
    },

    // 添加分类
    addCategory() {
      uni.navigateTo({
        url: `/pages/other/setup/addCategory?data=${encodeURIComponent(
          JSON.stringify(this.categoryData[this.current])
        )}`,
      });
    },

    async init() {
      this.categoryData = [];
      uni.showLoading({
        title: "加载中",
      });

      //商品分类
      let res = await getShopGoodsLabelList();
      if (res.data.success) {
        /**
         * 商品分类布局 我觉得tabs为一级 tabs的内容为二级
         * 所以将数据进行储存后续遍历
         */
        res.data.result.forEach((item) => {
          if (item.children && item.children.length != 0) {
            item.children.map((child) => {
              this.$set(child, "show", false);
            });
          }
        });
        this.categoryData = res.data.result;
        this.tabList = res.data.result.map((item) => {
          return { name: item.labelName, value: item.id };
        });
        this.current = 0;
      }

      uni.hideLoading();
    },
  },
};
</script>
<style scoped>
page {
  background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
@import "@/components/global.scss";
.fixed {
  position: fixed;
  bottom: 0;
  width: 80%;
  left: 10%;
  bottom: 10rpx;
}
.content {
  padding-bottom: 100rpx;
}
.right {
  font-size: 30rpx;
  margin-right: 32rpx;
}
/deep/ .u-swipe-action {
  background: none !important;
  margin: 20rpx 0;
}
.global-item {
  justify-content: space-between;
  border-radius: 0 !important;
  margin: 0;
}
.item-left {
  flex: 3;
}
.item-right {
  flex: 1;
  display: flex;
  color: #999;
  text-align: right;
  font-size: 24rpx;
  align-items: center;
  justify-content: flex-end;
}
.add-child {
  background: #333;
  border-radius: 10rpx;
  font-size: 24rpx;
  padding: 5rpx 24rpx;
  color: #fff;
  text-align: center;
}
.drop-list-tab {
  flex: 2 !important;
  overflow: hidden;
}
.drop-list-config {
  display: flex;
  justify-content: flex-end;
  flex: 1;
  padding-bottom: 10rpx;
}
</style>